<template>
	<view>
		<u-popup :show="show" mode="bottom" :round="16" :closeable="true" @close="close" @open="open">
			<view class="main">
				<scroll-view scroll-y style="height: 1000rpx">
					<view class="flex">
						<view class="goods-img">
							<image :src="orderDetail.productMainImage" class="goods-img"></image>
						</view>
						<view class="flex-grow font-14 flex flex-direction justify-between">
							<view class="font-20 text-bold"  v-for="(cItem, cIndex) in orderStatusList" :key="cIndex" v-if="orderDetail.orderStatus == cItem.value">{{cItem.label}}</view>
							<view>{{orderDetail.productName}}</view>
							<view>{{orderDetail.deliverName}}: {{orderDetail.deliverNo}}</view>
						</view>
					</view>
					<view class="margin-top padding-lr">
						<uni-steps :options="stepList" active-color="#E60000" :active="active" direction="column"/>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps'
	import {
		orderStatusList
	} from '@/common/api/dict.js'
	export default {
		props: {
			orderDetail: Object
		},
		components: {
			uniSteps
		},
		data() {
			return {
				show: false,
				pageNo: 1,
				status: 'loading',
				type: '',
				active: 0,
				stepList: [],
				orderStatusList: orderStatusList
			};
		},
		methods: {
			close() {
				this.show = false
			},
			open() {
				this.getWuliuLine()
			},
			/**
			 * orderno:快递单号
			 * orderType：快递公司
			 * **/
			getWuliuLine() {
				uni.showLoading()
				uni.request({
					url: 'https://api.999000.cn/kuaidi.php?act=index',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						no: this.orderDetail.deliverNo, //单号75803578819556
						com: this.orderDetail.deliverName, // 快递名称中通快递
						phone: this.orderDetail.receiveMobile,
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.resultcode == 200) {
							let data = res.data.result.list
							this.stepList = data.map(item=> {
								return {title: item.remark, desc: item.datetime}
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: '网络错误'
						})
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 60rpx;
		padding: 80rpx 0 30rpx 0;

		.goods-img {
			width: 157rpx;
			height: 157rpx;
			margin-right: 30rpx;
		}
	}
</style>